<template>
	<el-menu  router style="margin-left:10px;margin-right:10px">
	 	<el-sub-menu
			v-for="item in menuStore.menu"
			:key="item.id"
			:index="item.path">
			<template #title>{{item.name}}</template>
			<el-menu-item
				v-for="child in item.children"
				:key="child.id"
				:index="child.path">{{child.name}}</el-menu-item>
		</el-sub-menu>
		<el-sub-menu index="/PermissionsM" >
            <template #title>
				<!--<el-icon><Lock /></el-icon> -->
				<IconPermission  style="margin-right:10px" />权限管理
			</template> 
			<el-menu-item index="/role">
				<el-icon><Avatar /></el-icon>
				<span>角色管理</span>
			</el-menu-item>
			<el-menu-item index="/user">
				<el-icon><User /></el-icon>
				<span>用户管理</span>
			</el-menu-item>
			<el-menu-item index="/res">
				<el-icon><Files /></el-icon>
				<span>权限管理</span>

			</el-menu-item>
		</el-sub-menu>
		<el-sub-menu index="MembershipM">
			<template #title>
				<el-icon><User /></el-icon>
				<span>会员管理</span>
			</template>
			<el-menu-item index="membership">
				<el-icon><UserFilled /></el-icon>
				<span>会员列表</span>

			</el-menu-item>
      <el-menu-item index="/summery">
				<el-icon><UserFilled /></el-icon>
				<span>用户总览</span>

			</el-menu-item>
		</el-sub-menu>
		
		<el-sub-menu index="/MerchandiseM">
			<template #title>
				<el-icon><ShoppingCart /></el-icon>
				<span>商品管理</span>
			</template>
			<el-menu-item index="/category">
				<el-icon><List /></el-icon>
				<span>分类管理</span>
			</el-menu-item>
			<el-menu-item index="/goods">
				<el-icon><Goods /></el-icon>
				<span>商品信息管理</span>
			</el-menu-item>
			<el-menu-item index="marketing">
				<el-icon><Money /></el-icon>
				<span>营销管理</span>
			</el-menu-item>
		</el-sub-menu>
		<el-sub-menu index="/TerritoryM">
			<template #title>
				<el-icon><Location /></el-icon>
				<span>门店管理</span>
			</template>
			<el-menu-item index="/region">
				<el-icon><LocationFilled /></el-icon>
				<span>服务区域管理</span>
			</el-menu-item>
			<el-menu-item index="/stores">
				<el-icon><MapLocation /></el-icon>
				<span>门店管理</span>
			</el-menu-item>
		</el-sub-menu>
		<el-sub-menu index="/OrderM">
			<template #title>
				<el-icon><Memo /></el-icon>
			    <span>订单管理</span>
			</template>
			<el-menu-item index="/order">
				<el-icon><GoodsFilled /></el-icon>
				<span>订单管理</span>
			</el-menu-item>
		</el-sub-menu>
		<el-sub-menu index="/Statistics">
			<template #title>
				<el-icon><Notebook /></el-icon>
				<span>数据统计</span>
			</template>
			<el-menu-item index="/sales">
				<el-icon><Goods /></el-icon>
				<span>商品销售总览</span>
			</el-menu-item>
			<el-menu-item index="/visitors">
				<el-icon><User /></el-icon>
				<span>商品分布总览</span>
			</el-menu-item>
		</el-sub-menu>
		<el-sub-menu index="/System">
			<template #title>
				<el-icon><Platform /></el-icon>
				<span>系统管理</span>
			</template>
			<el-menu-item index="/AdministratorLL"><el-icon><PhoneFilled /></el-icon><span>管理员日志</span></el-menu-item>
			<el-menu-item index="/UserLL"><el-icon><Odometer /></el-icon><span>用户日志</span></el-menu-item>
		</el-sub-menu> 
	</el-menu> 
</template>

<script setup>
import { Lock,Avatar, User, Files, List,Odometer,PhoneFilled,ShoppingCart,UserFilled,Platform,Goods,Notebook,GoodsFilled,Memo,MapLocation,LocationFilled,Location,Money} from '@element-plus/icons-vue'
import IconPermission from  '@/components/icons/IconPermission'
import { userMenuStore } from '@/stores'
const menuStore = userMenuStore()
</script>

<style scoped lang="scss">
	.el-menu-item{
			  background-color: #f5f7fa;
			  border-radius: 8px;
			  padding: 30px 0px;
		}
		.el-menu{
			  background-color: #f5f7fa;
			  border-radius: 8px;
			   border-right: none;
		 }
		 .el-sub-menu, .el-sub-menu__title{
			 background-color: #f5f7fa;
			 border-radius: 8px 8px 8px 8px;
		 }
</style>